<template>
	<view class="oa-content">


		<view class="">
			<view class="tn-padding-top-xs" style="background-color: #E7EDF7;"></view>


			<view class="tn-margin"
				style="background-color: #FFFFFF;border-radius: 24rpx; padding: 20rpx 30rpx 30rpx 30rpx;">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min"
					style="padding: 30rpx 30rpx 20rpx 0rpx;">
					<view class="justify-content-item">
						<text class="tn-text-bold tn-text-xl">客户信息</text>
					</view>
					<view class="justify-content-item tn-color-gray--dark">
						<!-- *为必填 -->
					</view>
				</view>

				<view
					class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
					<view class="justify-content-item" style="min-width: 150rpx;">
						<view class="tn-text-bold">
							客户姓名 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
					</view>
					<view class="justify-content-item tn-color-grey tn-text-right">
						<view class="tn-color-gray tn-color-black" style="width:50vw">
							<input placeholder="请输入联客户姓名" name="input" placeholder-style="color:#AAAAAA"
								value=""></input>
						</view>
					</view>
				</view>



				<view
					class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
					<view class="justify-content-item" style="min-width: 150rpx;">
						<view class="tn-text-bold">
							企业名称 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
					</view>
					<view class="justify-content-item tn-color-grey tn-text-right">
						<view class="tn-color-gray tn-color-black" style="width:50vw">
							<input placeholder="请输入企业名称" name="input" placeholder-style="color:#AAAAAA"
								value=""></input>
						</view>
					</view>
				</view>
				<view
					class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
					<view class="justify-content-item" style="min-width: 150rpx;">
						<view class="tn-text-bold">
							部门 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
					</view>
					<view class="justify-content-item tn-color-grey tn-text-right">
						<view class="tn-color-gray tn-color-black" style="width:50vw">
							<input placeholder="请输入部门" name="input" placeholder-style="color:#AAAAAA" value=""></input>
						</view>
					</view>
				</view>

				<view
					class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
					<view class="justify-content-item" style="min-width: 150rpx;">
						<view class="tn-text-bold">
							客户电话 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
					</view>
					<view class="justify-content-item tn-color-grey tn-text-right">
						<view class="tn-color-gray tn-color-black" style="width:50vw">
							<input placeholder="请输入客户电话" name="input" placeholder-style="color:#AAAAAA"
								value=""></input>
						</view>
					</view>
				</view>


				<view
					class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
					<view class="justify-content-item" style="min-width: 150rpx;">
						<view class="tn-text-bold">
							微信号 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
					</view>
					<view class="justify-content-item tn-color-grey tn-text-right">
						<view class="tn-color-gray tn-color-black" style="width:50vw">
							<input placeholder="请输入微信号" name="input" placeholder-style="color:#AAAAAA" value=""></input>
						</view>
					</view>
				</view>
				<view
					class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
					<view class="justify-content-item" style="min-width: 150rpx;">
						<view class="tn-text-bold">
							QQ号 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
					</view>
					<view class="justify-content-item tn-color-grey tn-text-right">
						<view class="tn-color-gray tn-color-black" style="width:50vw">
							<input placeholder="请输入QQ号" name="input" placeholder-style="color:#AAAAAA" value=""></input>
						</view>
					</view>
				</view>
				<view
					class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
					<view class="justify-content-item" style="min-width: 150rpx;">
						<view class="tn-text-bold">
							电子邮箱 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
					</view>
					<view class="justify-content-item tn-color-grey tn-text-right">
						<view class="tn-color-gray tn-color-black" style="width:50vw">
							<input placeholder="请输入电子邮箱" name="input" placeholder-style="color:#AAAAAA"
								value=""></input>
						</view>
					</view>
				</view>


				<view
					class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
					<view class="justify-content-item" style="min-width: 150rpx;">
						<view class="tn-text-bold">
							公司网址 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
					</view>
					<view class="justify-content-item tn-color-grey tn-text-right">
						<view class="tn-color-gray tn-color-black" style="width:50vw">
							<input placeholder="请输入公司网址" name="input" placeholder-style="color:#AAAAAA"
								value=""></input>
						</view>
					</view>
				</view>


				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-padding-bottom-xs">
					<view class="justify-content-item" style="min-width: 150rpx;">
						<view class="tn-text-bold">
							地址 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
					</view>
					<view class="justify-content-item tn-color-grey tn-text-right">
						<view class="tn-color-gray tn-color-black" style="width:50vw">
							<input placeholder="请输入地址" name="input" placeholder-style="color:#AAAAAA" value=""></input>
						</view>
					</view>
				</view>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view
						class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
						<view class="justify-content-item" style="min-width: 150rpx;">
							<view class="tn-text-bold">
								跟进状态 <text class="tn-color-red tn-padding-left-xs">*</text>
							</view>
						</view>
						<view class="justify-content-item tn-color-grey tn-text-right">
							<view class="tn-color-gray tn-color-black" style="width:50vw">
								<view class="tn-color-gray" v-if="index===99">
									请选择
									<text class="tn-icon-right tn-padding-left-xs"></text>
								</view>
								<view class="" v-else>
									{{array[index]}}
									<text class="tn-icon-right tn-padding-left-xs"></text>
								</view>
							</view>
						</view>
					</view>
				</picker>

				<picker @change="bindPickerChange1" :value="index1" :range="array1">
					<view
						class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
						<view class="justify-content-item" style="min-width: 150rpx;">
							<view class="tn-text-bold">
								线索来源 <text class="tn-color-red tn-padding-left-xs">*</text>
							</view>
						</view>
						<view class="justify-content-item tn-color-grey tn-text-right">
							<view class="tn-color-gray tn-color-black" style="width:50vw">
								<view class="tn-color-gray" v-if="index1===99">
									请选择
									<text class="tn-icon-right tn-padding-left-xs"></text>
								</view>
								<view class="" v-else>
									{{array1[index1]}}
									<text class="tn-icon-right tn-padding-left-xs"></text>
								</view>
							</view>
						</view>
					</view>
				</picker>
				<picker @change="bindPickerChange2" :value="index2" :range="array2">
					<view
						class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-top tn-padding-bottom">
						<view class="justify-content-item" style="min-width: 150rpx;">
							<view class="tn-text-bold">
								负责人 <text class="tn-color-red tn-padding-left-xs">*</text>
							</view>
						</view>
						<view class="justify-content-item tn-color-grey tn-text-right">
							<view class="tn-color-gray tn-color-black" style="width:50vw">
								<view class="tn-color-gray" v-if="index2===99">
									请选择
									<text class="tn-icon-right tn-padding-left-xs"></text>
								</view>
								<view class="" v-else>
									{{array2[index2]}}
									<text class="tn-icon-right tn-padding-left-xs"></text>
								</view>
							</view>
						</view>
					</view>
				</picker>
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min"
					style="padding: 30rpx 30rpx 20rpx 0rpx;">
					<view class="justify-content-item">
						<text class="tn-text-bold ">备注说明</text>
					</view>
					<view class="justify-content-item tn-color-gray--dark">
						<!-- *为必填 -->
					</view>
				</view>

				<view class="tn-color-gray--dark tn-text-justify" style="padding: 10rpx 0rpx 0rpx 0rpx;">
					<view class="tn-bg-gray--light" style="border-radius: 10rpx;margin: 20rpx 0rpx 20rpx 0rpx;">
						<textarea maxlength="300" placeholder="请填写关键信息" placeholder-style="color:#AAAAAA"
							style="height: 160rpx;padding:30rpx 0 20rpx 30rpx;"></textarea>
					</view>
				</view>
				
				
			</view>

			<!-- 验证码倒计时 -->
			<tn-verification-code ref="code" uniqueKey="login-demo-4" :seconds="60" @change="codeChange">
			</tn-verification-code>

			<!-- 悬浮按钮-->
			<view class="tn-flex tn-footerfixed tn-padding">
				<view class="tn-flex-1 justify-content-item tn-text-center">
					<tn-button backgroundColor="#FFAC00 " padding="40rpx 0" width="60%" :fontSize="28"
						fontColor="#FFFFFF" shape="round" @click="tn('/workPages/prompt')">
						<text class="">提交信息</text>
					</tn-button>
				</view>
			</view>

			<view class="tn-tabbar-height"></view>

		</view>


	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateCert',
		mixins: [template_page_mixin],
		data() {
			return {
				tips: '获取验证码',
				index: 99,
				date: '',
				array: ['潜在客户', '目标客户', '现实客户', '流失客户', '非客户'],
				index1: 99,
				array1: ['官网引流', 'APP引流', '社群运营', '新媒体', '付费渠道', '口碑传播', '资源置换', '线下市场'],
				index2: 99,
				array2: ['张三', '李四', '王二', '老罗', '老刘'],

			}
		},
		computed: {

		},
		methods: {

			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},

			// 获取验证码
			getCode() {
				if (this.$refs.code.canGetCode) {
					this.$t.message.loading('正在获取验证码')
					setTimeout(() => {
						this.$t.message.closeLoading()
						this.$t.message.toast('验证码已经发送')
						// 通知组件开始计时
						this.$refs.code.start()
					}, 2000)
				} else {
					this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
				}
			},
			// 获取验证码倒计时被修改
			codeChange(event) {
				this.tips = event
			},


		}
	}
</script>

<style lang="scss" scoped>
	.oa-content {
		background-color: #E7EDF7;
		// height: 100vh;
		min-height: 100vh;
		padding-bottom: 60rpx;
		padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
	}




	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/


	/* 用户头像 start */
	.logo-image {
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 2rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}


	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 160rpx;
		height: calc(180rpx + env(safe-area-inset-bottom) / 2);
		height: calc(180rpx + constant(safe-area-inset-bottom));
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(40rpx + env(safe-area-inset-bottom));
		z-index: 1;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
	}

	/* 底部悬浮按钮 end*/

	/* 自定义上传事件 start */
	.image-upload {
		&__wrap {
			display: flex;
			align-items: center;
		}

		&__item {
			flex: 1;
			width: calc(100% - 60rpx);
			max-width: 50%;
			height: 260rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.image {
				width: 100%;
				height: 100%;
				border: 2rpx dashed #E6E6E6;
				border-radius: 15rpx;
				overflow: hidden;
			}
		}

		&__image,
		&__empty {
			width: 100%;
			height: 90%;
		}

		&__title {
			padding-top: 30rpx;
			line-height: 1;
		}

		&__item+&__item {
			margin-left: 20rpx;
		}
	}

	/* 自定义上传事件 end */
</style>